<template>
  <div id="hBarChart" class="h-bar-chart" ref="hBarChart"></div>
</template>
<script>
import { hBarOptions, resizeChart } from "@/assets/js/echartOptions.js";

export default {
  name: "hBar",
  data() {
    return {
      hBarChart: null,
      options: null,
    };
  },
  watch: {
    data(val) {
      this.options.data = val;
      this.hBarChart.setOption(hBarOptions({ ...this.options }));
      this.hBarChart.resize();
    },
    WaterfallData(val) {
      this.options.WaterfallData = val;
      this.hBarChart.setOption(hBarOptions({ ...this.options }));
      this.hBarChart.resize();
    },
    width(val) {
      this.options.width = val;
      this.lineBarChart.setOption(hBarOptions({ ...this.options }));
      this.lineBarChart.resize();
    },
    yName(val) {
      this.options.yName = val;
      this.hBarChart.setOption(hBarOptions({ ...this.options }));
      this.hBarChart.resize();
    },
    xData(val) {
      this.options.xData = val;
      this.hBarChart.setOption(hBarOptions({ ...this.options }));
      this.hBarChart.resize();
    },
  },
  props: {
    nameLocationX: {
      type: String,
      default: "end",
    },
    barBorderRadius: {
      type: Array,
      default: () => [0, 0, 0, 0],
    },
    echartTitle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    textRate: {
      // 字体的缩放比例
      type: Number,
      default: 1,
    },
    isYAxis: {
      type: Boolean,
      default: true,
    },
    stack: {
      type: String,
      default: "Total",
    },
    WaterfallData: {
      type: Array,
      default: () => [],
    },
    Waterfall: {
      type: Boolean,
      default: false,
    },
    xAxisInverse: {
      type: Boolean,
      default: false,
    },
    yAxisPosition: {
      type: String,
      default: "left",
    },
    width: {
      type: String,
      default: "",
    },
    isXGradient: {
      type: Boolean,
      default: false,
    },
    isLabel: {
      type: Boolean,
      default: true,
    },
    color: {
      type: Array,
      default: () => ["#16CBFF", "#48FCB2"],
    },
    data: {
      type: Array,
      default: () => [],
    },
    isBarBg: {
      type: Boolean,
      default: false,
    },
    maxValue: {
      type: String,
      default: "",
    },
    barWidth: {
      type: Number,
      default: 15,
    },
    labelColor: {
      type: String,
      default: "#fff",
    },
    util: {
      type: String,
      default: "",
    },
    xAxisName: {
      type: String,
      default: "",
    },
    grid: {
      type: Object,
      default: () => {
        return {
          containLabel: false,
          left: "12%",
          top: "8%",
          right: "8%",
          bottom: "8%",
        };
      },
    },
    yAxisLabel: {
      type: Object,
      default: () => {
        return {};
      },
    },
    xAxisPosition: {
      type: String,
      default: "",
    },
    xAxisAxisLine: {
      type: Boolean,
      default: true,
    },
    isValueRight: {
      type: Boolean,
      default: false,
    },
    barBackColor: {
      type: String,
      default: "",
    },
    // 文字垂直对齐方式，默认自动 top\ middle\ bottom
    yAxisVerticalAlign: {
      type: String,
      default: "",
    },
    // 文字垂直对齐方式，默认自动 left\ center\ right
    yAxisAlign: {
      type: String,
      default: "",
    },
    // 文字块的内边距
    yAxisAlignPadding: {
      type: Array,
      default: () => [0, 0, 0, 0],
    },
    // 文字块的内边距
    yAxisAxisLabelMargin: {
      type: Number,
      default: 8,
    },
    isScatter: {
      type: Boolean,
      default: false,
    },
    yName: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.hBarChart = this.$echarts.init(this.$refs["hBarChart"]);
    this.options = {
      barBorderRadius: this.barBorderRadius,
      echartTitle: this.echartTitle,
      isYAxis: this.isYAxis,
      stack: this.stack,
      Waterfall: this.Waterfall,
      WaterfallData: this.WaterfallData,
      xAxisInverse: this.xAxisInverse,
      yAxisPosition: this.yAxisPosition,
      isXGradient: this.isXGradient,
      color: this.color,
      data: this.data,
      isBarBg: this.isBarBg,
      maxValue: this.maxValue,
      barWidth: this.barWidth,
      // width: this.width,
      labelColor: this.labelColor,
      util: this.util,
      xAxisName: this.xAxisName,
      isLabel: this.isLabel,
      grid: this.grid,
      yAxisLabel: this.yAxisLabel,
      xAxisPosition: this.xAxisPosition,
      xAxisAxisLine: this.xAxisAxisLine,
      isValueRight: this.isValueRight,
      barBackColor: this.barBackColor,
      yAxisVerticalAlign: this.yAxisVerticalAlign,
      yAxisAlign: this.yAxisAlign,
      yAxisAlignPadding: this.yAxisAlignPadding,
      yAxisAxisLabelMargin: this.yAxisAxisLabelMargin,
      isScatter: this.isScatter,
      textRate: this.textRate,
      nameLocationX: this.nameLocationX,
      yName: this.yName,
    };
    this.hBarChart.setOption(hBarOptions({ ...this.options }));
    // const that = this;
    // this.$refs.hBarChart.addEventListener('click', function (evt) { //这里直接使用的是未被echart实例的dom元素。
    //   let length = that.xAxisName.length + 1;
    //   let e = evt || window.event;
    //   let numall = e.target.clientWidth - 90 - 60;
    //   let num = e.offsetX - 89;
    //   let index = Math.floor((num) / (numall / length));//得到点击的位置    
    //   if (that.xAxisName[index]) {
    //     that.$emit("clickFn", {
    //       name: that.xAxis[index],
    //     });
    //   }
    // })
    resizeChart(this.hBarChart);
  },
};
</script>
<style scoped>
.h-bar-chart {
  width: 100%;
  height: 100%;
}
</style>
